import { Switch, Route, Redirect } from "react-router-dom";
import { INDEX, ROUTES } from "./routes";
import NoMatch from "./views/noMatch";
import ParticleLine from "react-particle-line";

function App(){
    const caption = "连云港港区潮流泥沙模拟信息共享平台";
    return (
        <div id="gridBox">
            <div id="headerBox">
                <h1 className="headerBox-h1">{caption}</h1>
            </div>
            <div id="contentBox">
                <ParticleLine hoverEffect={false}>
                    <Switch>
                        {
                            ROUTES.map(r => <Route exact path={r.path} key={r.path} component={r.component} />)
                        }
                        <Redirect exact from="/" to={INDEX} />
                        <Route>
                            <NoMatch />
                        </Route>
                    </Switch>
                </ParticleLine>
            </div>
        </div>
    );
}

export default App;
